<!DOCTYPE html>
<html>
<link rel="stylesheet" href="../font_css/iconfont.css">
<link rel="shortcut icon" href="../img/logo.ico">

<head>
    <meta charset="utf-8">
    <title>商品详情页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        footer {
            background-color: #212121;
        }
        
        footer .banner li {
            list-style: none;
            height: 32px;
            line-height: 32px;
        }
        
        footer #banner a,
        footer .banner li a {
            text-decoration: none;
            color: white;
        }
        
        .banner {
            width: 991px;
            margin: 0 auto;
        }
        
        .banner #fp {
            position: relative;
            top: 4px;
        }
        
        #logo {
            padding: 20px 0px;
        }
        
        #logo img {
            width: 170px;
            height: 95px;
            display: block;
            margin: 0 auto;
        }
        
        .banner .box {
            display: inline-block;
            color: white;
            vertical-align: top;
        }
        
        .banner .big {
            font-weight: 700;
        }
        
        #first {
            width: 245px;
        }
        
        #second {
            width: 200px;
        }
        
        #third {
            width: 206px;
        }
        
        #four {
            width: 196px;
        }
        
        #five {
            width: 125px;
        }
        
        #five a {
            display: inline-block;
            width: 43px;
            height: 43px;
        }
        
        footer #last {
            background-color: #000000;
        }
        
        footer #banner {
            width: 1100px;
            margin: auto;
            height: 38px;
            font-size: 12px;
            line-height: 38px;
            color: white;
        }
        
        footer #footlast {
            width: 500px;
            display: inline-block;
        }
        
        footer #txt {
            display: inline-block;
            width: 190px;
            padding-left: 70px;
        }
        
        footer #banner a {
            padding: 0 50px;
        }
        
        #wrap1 {
            width: 1150px;
            margin: auto;
            overflow: hidden;
        }
        
        #wrap1 #lpic {
            margin-top: 50px;
            width: 450px;
            height: 640px;
            display: inline-block;
            vertical-align: top;
        }
        
        #wrap1 #lpic #smallbox {
            width: 400px;
            height: 512px;
            position: absolute;
            left: 185px;
            top: 213px;
            background-image: url(../img/down1.jpg);
            background-size: 400px 512px;
        }
        
        #wrap1 #lpic #smallbox #mas {
            width: 168px;
            height: 168px;
            position: absolute;
            background-color: #404040;
            opacity: 0.5;
            display: none;
        }
        
        #wrap1 #lpic #bigerbox {
            width: 336px;
            height: 336px;
            background-image: url(../img/down1.jpg);
            background-size: 800px 1024px;
            position: absolute;
            left: 680px;
            top: 250px;
            display: none;
        }
        
        #wrap1 #lpic #zi {
            position: absolute;
            left: 185px;
            top: 750px;
        }
        
        #wrap1 #lpic #ri {
            position: absolute;
            left: 300px;
            top: 750px;
        }
        
        #wrap1 #rtxt {
            margin-top: 50px;
            vertical-align: top;
            display: inline-block;
            width: 640px;
            margin-left: 50px;
            overflow: hidden;
        }
        
        #wrap1 #rtxt p {
            font-size: 15px;
        }
        
        #wrap1 #num {
            display: block;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
        }
        
        #wrap1 .col {
            color: #afadad;
        }
        
        #wrap1 .siz {
            font-size: 18px;
            padding-right: 3px;
        }
        
        #wrap1 #qian {
            text-decoration: line-through;
        }
        
        #wrap1 #lz {
            background-color: #c51333;
            color: white;
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 18px;
        }
        
        #wrap1 #hascol {
            background-color: #f2f2f2;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 30px;
        }
        
        #wrap1 #hascol>ul>li {
            list-style: none;
            float: left;
            line-height: 50px;
        }
        
        #wrap1 #hascol #shun {
            margin-left: 150px;
        }
        
        #wrap1 #hascol #qi {
            margin-left: 150px;
        }
        
        #wrap1 img {
            width: 75px;
        }
        
        #wrap1 #sele {
            padding-top: 30px;
        }
        
        #wrap1 #dx {
            margin-top: 30px;
            overflow: hidden;
        }
        
        #wrap1 #dx>li {
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #dedede;
            margin-right: 10px;
            text-align: center;
            line-height: 50px;
        }
        
        #wrap1 #shop span {
            display: inline-block;
            height: 45px;
            text-align: center;
            line-height: 45px;
        }
        
        #wrap1 #rtxt #shop {
            width: 145px;
            height: 45px;
            border: 1px solid black;
        }
        
        #wrap1 #shop1,
        #wrap1 #shop3 {
            color: white;
            width: 40px;
            background-color: #000000;
        }
        
        #wrap1 #shop2 {
            width: 55px;
        }
        
        #wrap1 #liang {
            margin-bottom: 10px;
            overflow: hidden;
        }
        
        #wrap1 #liang div {
            height: 60px;
            display: inline-block;
            margin-top: 40px;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        
        #wrap1 #liang #lin {
            background-color: black;
            width: 320px;
            float: left;
        }
        
        #wrap1 #liang #rin {
            background-color: red;
            width: 320px;
            float: right;
        }
        
        #wrap1 #cang {
            text-decoration: none;
        }
        
        #wrap1 .biao {
            display: inline-block;
            width: 20px;
        }
        
        #allpic {
            text-align: center;
            width: 1150px;
            margin: 0 auto;
        }
        
        #master {
            position: relative;
            height: 650px;
            background-color: #f7f7f7;
        }
        
        #master p {
            padding-top: 50px;
            text-align: center;
        }
        
        #master .dn {
            padding-top: 50px;
            width: 1084px;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
        
        #master #pic1 {
            display: none;
        }
        
        #master .dn .dbox {
            width: 300px;
            text-align: center;
            margin: 0;
        }
        
        #master .dn .dbox a {
            display: inline-block;
            padding-top: 15px;
            text-decoration: none;
            color: #000000;
        }
        
        #master .dn img {
            display: inline-block;
            width: 100%;
        }
        
        #master .dd {
            position: absolute;
            top: 230px;
            display: inline-block;
            width: 21px;
            height: 21px;
        }
        
        #master #ll {
            left: 120px;
        }
        
        #master #rr {
            right: 120px;
        }
        
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        header #box1>ul>li,
        header #box2>ul>li {
            float: left;
        }
        
        header #box1 a {
            text-decoration: none;
            color: black;
        }
        
        .clear::after {
            content: " ";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
        
        #box1 {
            height: 44px;
        }
        
        #box1 ul {
            padding-top: 20px;
            position: absolute;
            left: 900px;
        }
        
        #box1 li {
            padding-left: 50px;
        }
        
        #kong {
            height: 40px;
        }
        /* 一级导航 */
        
        #box2 {
            /* padding-top: 40px; */
            position: relative;
        }
        
        #box2>ul {
            display: inline-block;
            width: 852px;
            margin-left: 320px;
            /* overflow: hidden; */
        }
        
        #box2>ul>li>a {
            text-decoration: none;
            display: inline-block;
            padding-left: 30px;
            padding-right: 30px;
            color: #000000;
            font-weight: 700;
            height: 45px;
            line-height: 45px;
        }
        /* 二级导航 */
        
        #nav {
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            height: 500px;
            z-index: 1000;
            background-color: #e5e5e5;
            overflow: hidden;
        }
        
        #nav h4 {
            padding-bottom: 5px;
        }
        /* 第一列 */
        
        #nav #one {
            width: 380px;
            overflow: hidden;
            /* box-sizing: border-box; */
        }
        
        .ii .comm {
            display: inline-block;
            vertical-align: top;
        }
        
        #nav #one #small {
            margin-top: 40px;
            margin-left: 250px;
            /* margin-right: 100px; */
            /* width: 95px; */
            border-right: 1px solid black;
        }
        
        #nav #one #small li {
            height: 30px;
            line-height: 30px;
        }
        /* 第二列 */
        
        #nav #two {
            width: 250px;
            overflow: hidden;
        }
        
        #nav .osmall {
            border-right: 1px solid black;
        }
        
        #nav #nextsmall {
            margin-top: 40px;
            margin-left: 60px;
        }
        
        #nav #three {
            margin-top: 40px;
            width: 310px;
            margin-left: 150px;
        }
        
        #nav #p2,
        #nav #p1 {
            padding-top: 10px;
            text-align: center;
        }
        
        #nav #fou {
            margin-top: 40px;
            width: 310px;
            margin-left: 10px;
        }
        
        #nav #other {
            width: 150px;
            overflow: hidden;
        }
        
        #nav #others {
            width: 100px;
            overflow: hidden;
        }
        
        #box2>ul>li>a:hover {
            background-color: #e5e5e5;
        }
        
        .ii:hover #nav {
            display: block;
        }
        
        #box2>ul>li::after {
            content: " ";
            display: inline-block;
            width: 2px;
            height: 20px;
            background-color: #e5e5e5;
            position: relative;
            top: 4px;
        }
        
        #box2 #inner-box1 {
            display: inline-block;
            border: 1px solid #000000;
            border-radius: 5px;
            height: 38px;
            float: right;
            margin-right: 100px;
        }
        
        #box2 #inner-box1 input {
            width: 200px;
            border: 0;
            outline: none;
            padding: 10px;
        }
        
        #box3 {
            height: 30px;
            background-color: #000000;
        }
        
        header #lo {
            position: absolute;
            left: 105px;
            top: 35px;
        }
    </style>
</head>

<body>
    <header>

        <div id="box1" class="clear">
            <ul>
                <li><a href="log.html">登录</a>/<a href="reg.html">注册</a><span class="iconfont">&#xe62a;</span></li>
                <li>门店查询</li>
                <li>在线客服<span class="iconfont">&#xe607;</span></li>
                <li>我的购物车<span class="iconfont">&#xe613;</span></li>

            </ul>
        </div>
        <div id="kong">

        </div>
        <div id="box2">
            <ul class="clear">
                <li><a href=""> 全部商品</a></li>
                <li><a href="">新品</a></li>
                <li class="ii"><a href="">男装</a>
                    <!-- 二级导航 -->
                    <div id="nav">
                        <!-- 导航中的第一列 -->
                        <div id="one" class="comm">
                            <div id="small">
                                <h4>男士上装</h4>
                                <ul>
                                    <li>薄外套</li>
                                    <li>衬衫</li>
                                    <li>短袖T恤</li>
                                    <li>棉服</li>
                                    <li>卫衣</li>
                                    <li>羽绒服</li>
                                    <li>长袖T恤</li>
                                    <li>长袖衬衫</li>
                                </ul>
                            </div>

                        </div>
                        <!-- 导航中的第二列 -->
                        <div id="two" class="comm">
                            <div id="nextsmall">
                                <h4>男士下装</h4>
                                <ul>
                                    <li>短裤</li>
                                    <li>连体装</li>
                                    <li>卫裤</li>
                                    <li>休闲裤</li>
                                    <li>长裤</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 导航中的第三列 -->
                        <div id="three" class="comm">
                            <img src="../img/manshang.jpg">
                            <p id="p1">
                                Dickies工装连体裤
                            </p>
                        </div>
                        <!-- 导航中的第四列 -->
                        <div id="fou" class="comm">
                            <img src="../img/manshang2.jpg">
                            <p id="p2">
                                Dickies薄外套
                            </p>
                        </div>
                    </div>
                </li>
                <li class="ii"><a href="">女装</a>
                    <!-- 二级导航 -->
                    <div id="nav">
                        <!-- 第一列 -->
                        <div id="one" class="comm">
                            <div id="small">
                                <h4>女士上装</h4>
                                <ul>
                                    <li>薄外套</li>
                                    <li>衬衫</li>
                                    <li>短袖T恤</li>
                                    <li>卫衣</li>
                                    <li>羽绒服</li>
                                    <li>长袖T恤</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 第二列 -->
                        <div id="two" class="comm">
                            <div id="nextsmall">
                                <h4>女士下装</h4>
                                <ul>
                                    <li>半身裙</li>
                                    <li>短裤</li>
                                    <li>连体装</li>
                                    <li>连衣裙</li>
                                    <li>卫裤</li>
                                    <li>休闲裤</li>
                                    <li>阔腿裤</li>
                                    <li>长裤</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 第三列 -->
                        <div id="three" class="comm">
                            <img src="../img/woman1.jpg">
                            <p id="p1">
                                Dickies工装连体裤
                            </p>
                        </div>
                        <!-- 第四列 -->
                        <div id="fou" class="comm">
                            <img src="../img/wm2.jpg">
                            <p id="p2">
                                Dickies薄外套
                            </p>
                        </div>
                    </div>
                </li>
                <li><a href="">情侣款</a></li>
                <li class="ii"><a href="">配件</a>
                    <div id="nav">
                        <div id="one" class="comm">
                            <div id="small">
                                <h4>包袋</h4>
                                <ul>
                                    <li>单肩包</li>
                                    <li>双肩包</li>
                                    <li>斜挎包</li>
                                    <li>胸包/腰包</li>
                                </ul>
                            </div>
                        </div>
                        <div id="other" class="comm">
                            <div id="nextsmall" class="osmall">
                                <h4>鞋类</h4>
                                <ul>
                                    <li>鞋类</li>
                                </ul>
                            </div>
                        </div>
                        <div id="others" class="comm">
                            <div id="">
                                <div id="nextsmall">
                                    <h4>其他</h4>
                                    <ul>
                                        <li>其他</li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                        <div id="three" class="comm">
                            <img src="../img/pei1.jpg">
                            <p id="p1">
                                Dickies工装连体裤
                            </p>
                        </div>
                        <div id="fou" class="comm">
                            <img src="../img/pei2.jpg">
                            <p id="p2">
                                Dickies薄外套
                            </p>
                        </div>
                    </div>
                </li>
                <li><a href="">童装</a></li>
                <li><a href="">品牌动态</a></li>
            </ul>
            <!-- 搜索框 -->
            <div id="inner-box1">
                <input type="text" name="" id="" value="搜索Dickies" />
                <span class="iconfont">&#xe604;</span>
            </div>

        </div>
        <!-- 导航栏下面的黑长框 -->
        <div id="box3">

        </div>
        <!-- logo -->
        <img src="../img/logol.png" id="lo">

    </header>
    <div id="mask">


        <div id="wrap1">
            <div id="lpic">
                <div id="smallbox">
                    <div id="mas">

                    </div>
                </div>
                <div id="bigerbox">

                </div>
                <img src="../img/sr1.jpg" title='白色' id="zi">
                <img src="../img/sr2.jpg" title='黑色' id="ri">
            </div>

            <div id="rtxt">
                <p>Dickies男士多袋短袖T恤</p>
                <span id="num">
					DK008740
				</span>
                <strong class="siz">￥</strong><b class="siz">289.00</b><strong id="money" class="col siz">￥</strong><b id="qian" class="col siz">359.00</b><br>
                <span id="lz">
					赠品
				</span>
                <span id="">
					商场同款专区下单赠帆布袋
				</span><br>
                <div id="hascol">
                    <ul>
                        <li id="shun">
                            <span class="iconfont">
								&#xe781;
							</span>顺丰包邮</li>
                        <li id="qi"><span class="iconfont">
								&#xe67f;
							</span>7天无理由退换货</li>
                    </ul>
                </div>
                <p>请选择规格</p>
                <img src="../img/sr1.jpg" title='白色' id="nl">
                <img src="../img/sr2.jpg" title='黑色' id="nr">
                <p id="sele">选择尺码</p>
                <ul id="dx">
                    <li>S</li>
                    <li>M</li>
                    <li>L</li>
                    <li>XL</li>
                    <li>XXL</li>
                </ul>
                <br>
                <p>数量</p>
                <div id="shop">
                    <span id="shop1">
						-
					</span>
                    <span id="shop2">
						1
					</span>
                    <span id="shop3">
						+
					</span>
                </div>
                <div id="liang">
                    <div id="lin">
                        加入购物车<span class="iconfont">
							&#xe608;
						</span>
                    </div>
                    <div id="rin">
                        立即购买
                    </div>
                </div>
                <span class="iconfont">
					&#xe501;
				</span>
                <a href="" id="cang">立即收藏</a><br>
                <span class="iconfont biao">
					&#xe53d;
				</span>
                <span class="iconfont biao">
					&#xe629;
				</span>
                <span class="iconfont biao">
					&#xe64a;
				</span>
                <span class="iconfont biao">
					&#xe503;
		
				</span><span class="iconfont biao">
					&#xe682;
				</span>
                <span class="iconfont biao">
					&#xe610;
				</span>
            </div>
        </div>
        <div id="allpic">
            <img src="../img/mask1.jpg">
            <img src="../img/mask2.jpg">
            <img src="../img/mask3.jpg">
            <img src="../img/mask4.jpg">
            <img src="../img/mask5.jpg">
            <img src="../img/mask6.jpg">
            <img src="../img/mask7.jpg">
            <img src="../img/mask8.jpg">
            <img src="../img/mask9.jpg">
            <img src="../img/mask10.jpg">
            <img src="../img/mask11.jpg">
            <img src="../img/mask12.jpg">
            <img src="../img/mask13.jpg">
            <img src="../img/mask14.jpg">
            <img src="../img/mask15.jpg">
            <img src="../img/mask16.jpg">
            <img src="../img/mask17.jpg">
            <img src="../img/mask18.jpg">
            <img src="../img/mask19.jpg">
            <img src="../img/mask20.jpg">
            <img src="../img/mask21.jpg">
            <img src="../img/mask22.jpg">
            <img src="../img/mask23.jpg">
            <img src="../img/mask24.jpg">
            <img src="../img/mask25.jpg">
            <img src="../img/mask26.jpg">
            <img src="../img/mask27.jpg">
            <img src="../img/mask28.jpg">
            <img src="../img/mask29.jpg">
            <img src="../img/mask30.jpg">
            <img src="../img/mask31.jpg">
            <img src="../img/mask32.jpg">
        </div>
        <div id="master">
            <p>当季主推</p>
            <span id="ll" class="dd">
				<img src="../img/left.png" >
			</span>


            <div id="pic" class="dn">

                <div id="" class="dbox">
                    <div class="cbox">
                        <img src="../img/m3.jpg" class="sca">
                    </div>

                    <a href="mask.html">Dickies男士多袋短袖T恤</a>
                </div>
                <div id="" class="dbox">
                    <div class="cbox">
                        <img src="../img/m4.jpg" class="sca">
                    </div>

                    <a href="">男士刺绣短袖T恤</a>
                </div>
                <div id="" class="dbox">
                    <div class="cbox">
                        <img src="../img/m5.jpg" class="sca">
                    </div>

                    <a href="">Dickies男士休闲圆领T恤</a>
                </div>

            </div>
            <span id="rr" class="dd">
				<img src="../img/right.png" >
			</span>
        </div>



    </div>
    <footer>

        <!-- 脚部版心 -->
        <div class="banner">
            <div id="logo">
                <img src="../img/logol.png">
            </div>
            <div id="first" class="box">
                <ul>
                    <li><span class="big">在线客服</span><span id="fp">
             	<img src="../img/fp.png" >	
             	</span></li>
                    <li>在线时间09:00-22:00</li>
                </ul>
            </div>
            <div id="second" class="box">
                <ul>
                    <li><span class="big">官方商城</span></li>
                    <li><a href="">全部商品</a></li>
                    <li><a href="">新品</a></li>
                    <li><a href="">男装</a></li>
                    <li><a href="">女装</a></li>
                    <li><a href="">鞋类</a></li>
                    <li><a href="">配件</a></li>
                </ul>
            </div>
            <div id="third" class="box">
                <ul>
                    <li>
                        <span class="big">关于Dickies</span>
                    </li>
                    <li><a href="">品牌故事</a></li>
                    <li><a href="">品牌动态</a></li>
                </ul>
            </div>
            <div id="four" class="box">
                <ul>
                    <li><span class="big">客户服务</span></li>
                    <li><a href="">订购流程</a></li>
                    <li><a href="">如何注册</a></li>
                    <li><a href="">常见问题</a></li>
                    <li><a href="">联系我们</a></li>
                </ul>
            </div>
            <div id="five" class="box">
                <ul>
                    <li><span class="big">关注我们</span></li>
                    <li>
                        <a id="">
                            <img src="../img/weibo.png">
                        </a>
                        <a id="">
                            <img src="../img/weixin.png">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="last">
            <div id="banner">
                <div id="footlast">
                    沪ICP备18048101号c2019 Williamson-Dickie Mfg.Co.,LLC. Quality Workwear Since 1922
                </div>
                <span id="txt">
			沪公网安备:2000173号<span id="">
				<img src="../img/gongan.png" >
			</span>
                </span>
                <span id="">
			<a href="">隐私政策</a>
		</span>
                <span id="">
			<a href="">安全政策</a>
		</span>
            </div>
        </div>
    </footer>
</body>

</html>
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    let osmallbox = document.querySelector("#smallbox");
    let obigerbox = document.querySelector("#bigerbox");
    let omask = document.querySelector("#mas");
    class Magnifier {
        constructor(smallbox, bigerbox, mask) {
            this.smallbox = smallbox;
            this.bigerbox = bigerbox;
            this.mask = mask;
            this.mouseover();
            this.mouseout();
            this.mousemove();
        }
        mouseover() {
            let that = this;
            this.smallbox.onmouseover = function() {
                that.mask.style.display = "block";
                that.bigerbox.style.display = "block";
            }
        }
        mouseout() {
            let that = this;
            this.smallbox.onmouseout = function() {
                that.mask.style.display = "none";
                that.bigerbox.style.display = "none";
            }
        }
        mousemove() {
            let that = this;
            this.smallbox.onmousemove = function(evt) {
                let e = evt || event;
                // 遮罩的左上顶点的位置
                let left = e.pageX - 185 - that.mask.offsetWidth / 2;
                let top = e.pageY - 163 - that.mask.offsetHeight / 2;
                if (left < 0) {
                    left = 0
                }
                if (top < 0) {
                    top = 0
                }
                let maxleft = this.offsetWidth - that.mask.offsetWidth;
                let maxtop = this.offsetHeight - that.mask.offsetHeight;
                if (left > maxleft) {
                    left = maxleft
                }
                if (top > maxtop) {
                    top = maxtop
                }
                that.mask.style.left = left + "px";
                that.mask.style.top = top + "px";
                // 大盒子应该移动的距离
                let x = that.bigerbox.offsetWidth * that.mask.offsetLeft / that.mask.offsetWidth;
                let y = that.bigerbox.offsetHeight * that.mask.offsetTop / that.mask.offsetHeight;
                that.bigerbox.style.backgroundPositionX = -x + "px";
                that.bigerbox.style.backgroundPositionY = -y + "px";
            }
        }
    }
    let mf = new Magnifier(osmallbox, obigerbox, omask);
    $("#zi").click(function() {
        $(this).css({
            border: "1px solid black"
        });
        $("#bigerbox").css({
            backgroundImage: "url(../img/down1.jpg)"
        })
        $("#smallbox").css({
            backgroundImage: "url(../img/down1.jpg)",
            backgroundSize: "400px 512px"
        })
        $("#ri").css({
            border: "0px"
        });
    })
    $("#ri").click(function() {
        $(this).css({
            border: "1px solid black"
        });
        $("#bigerbox").css({
            backgroundImage: "url(../img/down4.jpg)"
        })
        $("#smallbox").css({
            backgroundImage: "url(../img/down4.jpg)",
            backgroundSize: "400px 512px"
        })
        $("#zi").css({
            border: "0px"
        });
    })
    $("#nl").click(function() {
        $(this).css({
            border: "1px solid black"
        });
        $("#bigerbox").css({
            backgroundImage: "url(../img/down1.jpg)"
        })
        $("#smallbox").css({
            backgroundImage: "url(../img/down1.jpg)",
            backgroundSize: "400px 512px"
        })
        $("#nr").css({
            border: "0px"
        });
    })
    $("#nr").click(function() {
        $(this).css({
            border: "1px solid black"
        });
        $("#bigerbox").css({
            backgroundImage: "url(../img/down4.jpg)"
        })
        $("#smallbox").css({
            backgroundImage: "url(../img/down4.jpg)",
            backgroundSize: "400px 512px"
        })
        $("#smallbox").css({

            backgroundSize: "400px 512px"
        })
        $("#nl").css({
            border: "0px"
        });
    })
    $(".cbox").mouseover(function() {
        $(this).css({
            border: "2px solid black",
        })
    })
    $(".cbox").mouseout(function() {
        $(this).css({
            border: "0",
        })
    })
    $(".sca").mouseover(function() {
        $(this).css({
            transform: "scale(0.9)",

        })
    })
    $(".sca").mouseout(function() {
        $(this).css({
            transform: "scale(1)",

        })

    })
    let num = 1;
    let shop2 = document.getElementById("shop2")
    $("#shop3").click(function() {
        $("#shop2").html(++num)
    })
    $("#shop1").click(function() {
        if (num > 1) {
            $("#shop2").html(--num)
        }
    })
    $("#lo").click(function() {

        location.href = 'index.html';
    })
    $("#lin").click(function() {
        location.href = 'shoppingCar.html';
    })
</script>